import "./css/main.css";
import * as signalR from "@aspnet/signalr";

const divMessages: HTMLDivElement = document.querySelector("#divMessages");
const tbMessage: HTMLInputElement = document.querySelector("#tbMessage");
const btnSend: HTMLButtonElement = document.querySelector("#btnSend");
const lblUserName: HTMLSpanElement = document.querySelector("#lblUserName");
const username = "user" + Math.floor(Math.random() * 1000);
lblUserName.textContent = username;

const connection = new signalR.HubConnectionBuilder()
  .withUrl("/chatHub")
  .build();

connection
.start()
.catch(err => document.write(err));

connection.on("ReceiveMessage", (username: string, message: string) => {
  let m = document.createElement("div");

    m.innerHTML = `<span class="message-author">${username}:</span><span>${message}</span>`;
  divMessages.appendChild(m);
  divMessages.scrollTop = divMessages.scrollHeight;
});

tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {
  if (e.keyCode === 13) {
    send();
  }
});

btnSend.addEventListener("click", send);

function send() {
    connection.send("SendMessage", username, tbMessage.value)
              .then(() => tbMessage.value = "");
}
